<template>
  <el-container>
    <el-container>
      <el-aside width="25%">
        <left
          ref="left"
          @changeDrawer="changeDrawer"
          @openDialog="openDialog"
        ></left>
      </el-aside>
      <el-container>
        <el-header>
          <div class="hleft">
            <header-search></header-search>
          </div>
          <div class="hcenter">
            <div v-show="isHome">
              <span class="htitle">排序方式</span>
              <el-select
                v-model="value"
                @change="selectChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="hright">
            <el-button
              style="position:relative;marginRight:10px"
              v-show="loginPage"
              type="primary"
              @click="handleLogin"
              >后台管理
              <span class="sdage" v-if="isLogin && mount > 0">{{
                mount
              }}</span></el-button
            >
            <el-button type="primary" @click="handleCancellation" v-if="isLogin"
              >退出</el-button
            >
          </div>
        </el-header>
        <el-main>
          <keep-alive include="archive,message,music">
            <router-view></router-view>
          </keep-alive>
        </el-main>
        <el-footer>
          <my-audio></my-audio>
        </el-footer>
      </el-container>
    </el-container>
    <!-- 抽屉：显示公告和归档 -->
    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      :with-header="false"
    >
      <vue-scroll :ops="ops" ref="vst">
        <div
          class="timelinebox"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <h2>{{ drawertitle }}</h2>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in annount"
              :key="index"
              :timestamp="item.date"
              placement="top"
              type="primary "
            >
              <el-card>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </vue-scroll>
    </el-drawer>
    <el-dialog title="访问拦截" :visible.sync="dialogFormVisible" width="500px">
      <el-input
        v-model="key"
        autocomplete="off"
        placeholder="日志访问权限暂不完全开放，请输入访问密码"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushlog">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import MyAudio from "./components/audio/MyAudio"
import Left from "./views/Left"
import HeaderSearch from "./views/HeaderSearch"
import { GetreadCom, FindFile } from "./api/index"
import {
  GetAnnount,
  CheckLogin,
  Cancellation,
  GetPermissins,
} from "./api/index"
export default {
  name: "App",
  data() {
    return {
      isHome: true,
      loginPage: true,
      key: "",
      dialogFormVisible: false,
      loading: true,
      isLogin: false,
      drawertitle: "公告",
      flag: true,
      drawer: false,
      annount: [], //储存公告的数组
      count: 0, //公告的数量
      options: [
        {
          value: "1",
          label: "按时间排序",
        },
        {
          value: "2",
          label: "按浏览量排序",
        },
      ],
      value: "1",
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {},
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: "#b3c0d1",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  watch: {
    // 检查路径控制后台管理按钮的显示与隐藏
    $route: function(newVal, oldVal) {
      if (newVal.path == "/login" || newVal.path == "/backend") {
        this.loginPage = false
      } else {
        this.loginPage = true
      }
      if (newVal.path.includes("/home")) {
        this.isHome = true
      } else {
        this.isHome = false
      }
    },
  },
  created() {
    const state = JSON.parse(window.localStorage.getItem("musicState"))
    if (state) {
      this.$store.commit("pushlist", state)
    } else {
      this.$store.commit("pushlist", [])
    }

    let sort = window.localStorage.getItem("sort")
    if (sort) {
      this.value = sort
    }
    this.getFile()
  },
  computed: {
    mount: function() {
      return this.$store.getters.getReadMount
    },
  },
  mounted() {
    // 检查用户是否登陆，当放在cresated中时无法执行(原因未知)
    CheckLogin().then((res) => {
      this.isLogin = res.isLogin
      this.$store.commit("upDateStaus", res.isLogin)
      if (this.isLogin) {
        GetreadCom().then((res) => {
          this.$store.commit("pushCom", res.data)
        })
      }
    })

    // 事件总线，监听登录状态，$emit 位于LoginPage.vue组件中
    this.$EventBus.$on("changeIsLogin", () => {
      this.isLogin = true
    })

    // 监听页面刷新
  },
  components: {
    Left,
    HeaderSearch,
    MyAudio,
  },
  methods: {
    // 关闭公告和归档的抽屉
    handleClose(done) {
      done()
      this.loading = true
    },
    // 打开公告栏
    changeDrawer(args) {
      this.annount = []
      this.drawer = true
      this.getAnnount({})
    },
    // 获取公告
    getAnnount(data) {
      GetAnnount(data).then((res) => {
        this.annount = []
        const { data, status, count } = res
        if (status) {
          this.annount.push(...data)
          this.count = count
          this.loading = false
        }
      })
    },
    // 后台管理
    handleLogin() {
      if (this.isLogin) {
        this.$router.push("/backend")
      } else {
        this.$router.push("/login")
      }
    },
    // 注销
    handleCancellation() {
      this.$confirm("您确定退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Cancellation().then((res) => {
            const { status, isLogin, msg } = res
            if (status) {
              this.$notify({
                title: "成功",
                message: msg,
                type: "success",
              })
              this.isLogin = isLogin
              this.$store.commit("upDateStaus", isLogin)
              this.$router.push("/home")
            }
          })
        })
        .catch(() => {})
    },
    // 点击确认访问密码按钮触发的事件
    pushlog() {
      GetPermissins({ name: "log", key: this.key }).then((res) => {
        if (res.status) {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
          })
          this.dialogFormVisible = false
          this.$router.push({ name: "log", query: { permissions: true } })
          this.key = ""
        } else {
          this.$notify.error({
            title: "错误",
            message: res.msg,
          })
        }
      })
    },
    // 打开访问权限窗口
    openDialog() {
      this.dialogFormVisible = true
    },

    // 更改文章排序方式
    selectChange() {
      window.localStorage.setItem("sort", this.value)
      this.$EventBus.$emit("sort", this.value)
    },

    // 获取个人信息
    async getFile() {
      let res = await FindFile()
      this.$store.commit("upDateAdmin", res)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  width: 100%;
  margin: 0px !important;
}
.el-header {
  background-color: #dbdada;
  display: flex;
  color: #333;
  display: flex;
  line-height: 60px;
  .hleft {
    flex: 1;
    text-align: left;
  }
  .hcenter {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hright {
    flex: 1;
    text-align: right;
  }
}

.el-aside {
  background-color: white;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-main {
  background-color: #eeeeee;
  height: calc(100% - 120px);
  color: #333;
  display: flex;
  padding: 0px;
  justify-content: center;
}
.el-footer {
  height: 60px;
  padding: 0px;
}
.htitle {
  height: 40px;
  line-height: 40px;
  display: inline-block;
  color: rgb(255, 255, 255);
  background: #409eff;
  padding: 0px 10px;
  margin: 0 10px;
  vertical-align: middle;
  border-radius: 5px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.timelinebox {
  height: 600px;
}
.el-drawer {
  h2 {
    margin: 20px;
    font-size: 18px;
  }
}
.el-timeline {
  margin: 20px;
  p {
    line-height: 25px;
  }
}
.sdage {
  position: absolute;
  top: -10px;
  right: -10px;
  color: white;
  background: red;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
</style>
<style lang="css">
.el-select {
  width: 135px;
  vertical-align: middle;
}
</style>
